<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% 
	String context = request.getContextPath(); 
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理</title>
<!-- <%@include file="/html/shiro/jsps/common/common.jsp"%> -->

<script type="text/javascript">
	$(function() {
		//组件
		var roleDatagrid,selectedRoleDatagrid,allRoleDatagrid, roleDialog, roleForm;
		roleDatagrid = $("#roleDatagrid");
		selectedRoleDatagrid = $("#selectedRoleDatagrid");
		allRoleDatagrid = $("#allRoleDatagrid");
		roleDialog = $("#roleDialog");
		roleForm = $("#roleForm");
		// 创建通配符把当前模块所有的功能，都打包到这个对象上
		var cmdObj = {
			create : function() {
				roleForm.form("clear");
				selectedRoleDatagrid.datagrid("loadData",{total:0,rows:[]})
				roleDialog.dialog("open");
			},
			edit : function() {
				var rowData = roleDatagrid.datagrid("getSelected");
				if (!rowData) {
					jQuery.messager.alert("温馨提示", "请先选择数据！", "info");
					return;
				}
				roleForm.form("clear");
				roleForm.form("load", rowData);
				selectedRoleDatagrid.datagrid("loadData",{total:0,rows:rowData.permissions})
				roleDialog.dialog("open");
			},
			remove : function() {
				// 获取选中行数据
				var rowData = roleDatagrid.datagrid("getSelected");
				// 判断是否选中行
				if (!rowData) {
					jQuery.messager.alert("温馨提示", "请选中一行数据！！", "info");
					return;
				}
				jQuery.get("<%=context%>/role/delete?roleId="+rowData.roleId, function(data) {
					if (data.success) {//删除成功
						jQuery.messager.alert('消息提示', '删除成功!', 'info',
								function() {
									//调用重新加载数据的方法
									roleDatagrid.datagrid("reload");
								});//消息							
					} else {
						jQuery.messager.alert('错误提示', data.msg, 'error');
					}
				}, 'json');
			},
			reload : function() {
				//调用重新加载数据的方法
				roleDatagrid.datagrid("reload");
			},
			save : function() {
				//提交表单
				roleForm.form('submit', {    
				    url:"<%=context%>/role/save",    
				    onSubmit: function(param){  
				    	//拼装角色所需要的对应权限
				    	var allRows = selectedRoleDatagrid.datagrid('getRows');
				    	$.each(allRows,function(index,obj){
				    		param['permissions['+index+'].permissionId'] = obj.permissionId; 
				    	})
				    }    
				});
			},
			cancel : function() {
				//关闭对话框
				roleDialog.dialog("close");
			},
/* 			search : function() {
				//简单搜索：查询条件必须少
				roleDatagrid.datagrid("load", $("#searchForm").serializeJSON());
			} */
		};
		// 初始化组件
		roleDatagrid.datagrid({
			url:"<%=context%>/role/list",
			title:"角色管理",
			fit:true,
			border:false,
			fitColumns:true,
			singleSelect:true,
			pagination:true,
			rownumbers:true,
			columns:[[    
		        {field:'roleName',title:'角色名称',width:20},    
		        {field:'permissions',title:'角色权限',width:100,formatter:arrayFormatter}    
		    ]],
		    toolbar: [
		    	{
					iconCls: 'icon-add',
					text:"添加",
					handler: cmdObj['create']
				},
		    	{
					iconCls: 'icon-edit',
					text:"修改",
					handler: cmdObj['edit']
				},
		    	{
					iconCls: 'icon-remove',
					text:"删除",
					handler: cmdObj['remove']
				},
		    	{
					iconCls: 'icon-reload',
					text:"刷新",
					handler: cmdObj['reload']
				},
			]

			
		});
		allRoleDatagrid.datagrid({
			width: 420,
			height: 330,
			url:"<%=context%>/perms/list",
			title:"所有权限",
			border : true,
			fitColumns : true,
			striped : true,
			rownumbers : true,
			singleSelect : true,
			pagination : true,
			onDblClickRow: function(index,row){
				//判断是否存在
				var allRows = selectedRoleDatagrid.datagrid('getRows');
				var flag = false;
				$.each(allRows,function(index,obj){
					if (obj.permissionId==row.permissionId) {
						jQuery.messager.alert('温馨提示', '请不要重复添加', 'info');
						flag =true;
						return;
					}
				});
				//往已选表格添加一条记录
				if (!flag) {
					selectedRoleDatagrid.datagrid('appendRow',row);
				}
			},
			columns:[[    
		        {field:'permissionName',title:'名称',width:10},    
		        {field:'permissionResource',title:'资源',width:20},   
		        {field:'permissionSn',title:'标识',width:10},    
		    ]]
		});
		
/* 		var pager = allRoleDatagrid.datagrid("getPager");
		pager.pagination({
			showPageList : true,
			showRefresh : false,
			displayMsg : ''
		}); */
		selectedRoleDatagrid.datagrid({
			title:"已选权限",
			width: 400,
			height: 330,
			border:false,
			fitColumns:true,
			singleSelect:true,
			rownumbers:true,
			onDblClickRow: function(index,row){
				//删除行
				selectedRoleDatagrid.datagrid("deleteRow",index);
			},
			columns:[[    
		        {field:'permissionName',title:'名称',width:10},    
		        {field:'permissionResource',title:'资源',width:20},   
		        {field:'permissionSn',title:'标识',width:10},    
		    ]]   
		});
		
		roleDialog.dialog({
			width: 850,
			height: 450,
			title:"添加/修改角色",
			closed:true,
			modal:true,
			buttons:[{
				text:'保存',
				iconCls:'icon-ok',
				handler:cmdObj['save']
			},{
				text:'关闭',
				iconCls:'icon-cancel',
				handler:cmdObj['cancel']
			}]
		});
		
		// 初始化添加表单
		roleForm.form({
			url : "<%=context%>/role/save",
			onSubmit : function() { // 在表单‘提交前’，做验证
				return roleForm.form("validate");
			},
			success : function(data) {//data是后台save方法返回的字符串
				// 把字符串转变成json对象
				data = jQuery.parseJSON(data);
				// 判断结果
				if (data.success) {
					// 关对话框
					roleDialog.dialog("close");
					jQuery.messager.alert("温馨提示", data.msg, "info", function() {
						//调用重新加载数据的方法
						roleDatagrid.datagrid("reload");
					});
				} else {
					jQuery.messager.alert('错误提示', data.msg, 'error');
				}
			}
		});
		
		//对页面所有按钮，统一监听
		$("a[data-cmd]").on("click", function() {
			// 获取对应按钮的cmd信息 
			//var cmd = $(this).attr("data-cmd");
			var cmd = $(this).data("cmd");
			// console.debug(cmd);
			if (cmdObj[cmd]) {
				//组件的disabled禁用属性,无法控制事件.
				//判断按钮是否有禁用样式.
				if ($(this).hasClass("l-btn-disabled")) {
					return;
				}
				//动态的方法名称，就调用动态的方法
				cmdObj[cmd]();
			}
		});
	});
</script>
</head>
<body>
	<!-- 数据表格 -->
	<table id="roleDatagrid" ></table>
	<!-- 添加编辑对话框 -->
	<div id="roleDialog">
	     <table>
	         <!-- 角色本身表单 -->
	     	<tr>
	     		<td colspan="2">
	     			<form id="roleForm" method="post">
						<input name="roleId" type="hidden" />
						<table>
							<tr>
								<td>角色名称：<input name="roleName" class="easyui-validatebox" required="true" /></td>
							</tr>
						</table>
				</form>
	     		</td>
	     	</tr>
	     	<tr>
				<td>
					<!--已选权限 -->
					<table id="selectedRoleDatagrid" ></table>
				</td>
				<td>
					<!--所有权限 -->
					<table id="allRoleDatagrid" ></table>
				</td>
			</tr>
	     </table>
		
	</div>
	
</body>
</html>